<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title"></view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<swiper class="swiper-box" autoplay circular>
			<swiper-item v-for="(item, index) in detail.photos" :key="index">
				<image class="swiper-item" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="con">
			<view class="title">{{ detail.title }}</view>
			<view class="bq">
				<view class="bq_nr bq_nr_x" v-if="detail.zjitian">连住优惠</view>
				<view class="bq_nr" v-for="(item, index) in shebei" :key="index">{{ item }}</view>
			</view>
			<view class="lx">
				<view class="lx_nr">
					<image class="lx_nr_img" src="/static/31.png" mode=""></image>
					<view class="lx_nr_title">{{ detail.czleixing }}</view>
					<view class="lx_nr_text">{{ detail.leixing }}·{{ detail.mianji }}m²</view>
				</view>
				<view class="lx_nr">
					<image class="lx_nr_img" src="/static/32.png" mode=""></image>
					<view class="lx_nr_title">{{ detail.shi }}间卧室</view>
					<view class="lx_nr_text">{{ detail.ting }}厅{{ detail.chu }}卫{{ detail.wei }}厨</view>
				</view>
				<view class="lx_nr">
					<image class="lx_nr_img" src="/static/33.png" mode=""></image>
					<view class="lx_nr_title">{{ detail.shuliang }}床{{ detail.renshu }}人</view>
					<view class="lx_nr_text">允许加客</view>
				</view>
			</view>
			<view class="info">
				<view class="info_box" @click="Location">
					<image class="info_box_img" src="/static/43.png" mode=""></image>
					<view class="info_box_left">
						<image class="info_box_left_img" src="/static/34.png" mode=""></image>
						{{ detail.address }}
					</view>
					<view class="info_box_right">
						地图·周边
						<image class="info_box_right_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
				<view class="info_right_btn" @click="onShowDatePicker">
					<view class="info_right_btn_nr">
						<view class="info_right_btn_nr_title">{{ cityStore.month_day_1 }}</view>
						<view class="info_right_btn_nr_text">入住</view>
					</view>
					<view class="info_right_btn_nr">
						<view class="info_right_btn_nr_title">{{ cityStore.month_day_2 }}</view>
						<view class="info_right_btn_nr_text">离开</view>
					</view>
					<view class="info_right_btn_nr">
						<view class="info_right_btn_nr_title">{{ cityStore.dayDiff }}晚</view>
						<image class="info_right_btn_nr_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				服务设施
			</view>
			<view class="serve">
				<view class="serve_box" v-for="(item, index) in fangyuans" :key="index">
					<view class="serve_box_left">{{ item.title }}</view>
					<view class="serve_box_right">
						<view class="serve_box_right_nr" v-for="(ttem, idx) in item.titles" :key="idx">
							<image class="serve_box_right_nr_img" src="/static/35.png" mode=""></image>
							{{ ttem.title }}
						</view>
					</view>
				</view>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				房屋评价({{ pjcount }})
				<view class="title_right" @click="to_appraise_list">全部评价</view>
			</view>

			<view class="appraise">
				<image class="appraise_left" :src="pingjia.avatar" mode=""></image>
				<view class="appraise_right">
					<view class="appraise_right_title">
						<view class="appraise_right_title_left">{{ pingjia.nickname }}</view>
						<view class="appraise_right_title_right">{{ pingjia.rztime }} 入住</view>
					</view>
					<view class="appraise_right_pf">
						<image
							class="appraise_right_pf_img"
							:src="'/static/' + ttem"
							v-for="(ttem, idex) in renderRating(pingjia.xing)"
							:key="idex"></image>
						{{ pingjia.xing }}
					</view>
					<view class="appraise_right_text">{{ pingjia.content }}</view>
					<view class="appraise_right_img">
						<image
							class="appraise_right_img_nr"
							:src="ttem"
							mode=""
							v-for="(ttem, idex) in pingjia.photo"
							:key="idex"></image>
					</view>
				</view>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				房东介绍
				<view class="title_right" @click="to_landlord_home(fangdong.id)">房东主页</view>
			</view>
			<view class="landlord" @click="to_landlord_home(fangdong.id)">
				<view class="landlord_left">
					<image class="landlord_left_img" :src="fangdong.photo" mode=""></image>
					{{ fangdong.name }}
				</view>
				<image class="landlord_right" src="/static/41.png" mode=""></image>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				预订须知
				<view class="title_right" @click="open(1)">全部规则</view>
			</view>
			<view class="notice">
				<view class="notice_nr">
					<view class="notice_nr_left">入住/离店</view>
					<view class="notice_nr_right">14:00-24:00入住，12:00之前需退房（以当地城市时区为主）</view>
				</view>
				<view class="notice_nr">
					<view class="notice_nr_left">房东要求</view>
					<view class="notice_nr_right">{{ detail.content }}</view>
				</view>
				<view class="notice_nr" @click="open(2)">
					<view class="notice_nr_left">取消规则</view>
					<view class="notice_nr_right" style="color: #2a68ef">
						查看详情
						<image class="notice_nr_right_img" src="/static/42.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="title">
				<view class="title_zw"></view>
				同类好房
			</view>

			<view class="list">
				<view class="list_nr" v-for="(item, index) in haofang" :key="index" @click="to_condo_detail(item.id)">
					<image class="list_nr_img" :src="item.photo" mode=""></image>
					<view class="list_nr_pfzw">
						<image class="list_nr_pfzw_img" src="/static/5.png" mode=""></image>
						<view class="list_nr_pfzw_text">{{ item.xingji }}</view>
					</view>
					<view class="list_nr_box">
						<view class="list_nr_title">{{ item.title }}</view>
						<view class="list_nr_text">
							{{ item.shi }}室{{ item.ting }}厅·{{ item.shuliang }}床·宜住{{ item.renshu }}人
						</view>
						<view class="list_nr_num">
							<span class="span1">¥</span>
							<span class="span2">{{ item.jwprice }}</span>
							<span class="span3">/晚</span>
							<span class="span4">¥{{ item.price }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_left" @click="collection">
					<image class="btn_box_left_img" src="/static/45.png" mode="" v-if="detail.is == 1"></image>
					<image class="btn_box_left_img" src="/static/48.png" mode="" v-else></image>
					<view class="btn_box_left_text">收藏</view>
				</view>
				<button class="btn_box_left" open-type="share">
					<image class="btn_box_left_img" src="/static/39.png" mode=""></image>
					<view class="btn_box_left_text">分享</view>
				</button>
				<button class="btn_box_left" open-type="contact" style="margin-right: 0">
					<image class="btn_box_left_img" src="/static/15.png" mode=""></image>
					<view class="btn_box_left_text">咨询</view>
				</button>
				<view class="btn_box_num">
					<span class="span1">¥</span>
					<span class="span2">{{ detail.price }}</span>
					<span class="span3">/晚</span>
				</view>
				<view class="btn_box_tight" @click="to_booking">立即预订</view>
			</view>
		</view>

		<uni-popup
			ref="popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
			:mask-click="false"
			@change="popup_change">
			<view class="popup_box">
				<image class="popup_box_zw" src="/static/50.png" mode="" @click="close"></image>
				<view class="popup_box_top">预订须知</view>
				<view class="popup_box_nav">
					<view
						class="popup_box_nav_nr"
						:class="popup_nav_id == 1 ? 'popup_box_nav_nr_xz' : ''"
						@click="popup_nav_id = 1">
						费用/要求
						<view class="popup_box_nav_nr_zw"></view>
					</view>
					<view
						class="popup_box_nav_nr"
						:class="popup_nav_id == 2 ? 'popup_box_nav_nr_xz' : ''"
						@click="popup_nav_id = 2">
						退订须知
						<view class="popup_box_nav_nr_zw"></view>
					</view>
				</view>
				<view class="popup_box_nr popup_box_nr_1" v-if="popup_nav_id == 1">
					<view class="popup_box_nr_1_title">费用须知</view>
					<view class="popup_box_nr_1_text">在线定金：订单确认后，在线支付房款得100%作为订金</view>
					<view class="popup_box_nr_1_title">房东要求</view>
					<view class="popup_box_nr_1_text">{{ detail.content }}</view>
				</view>
				<view class="popup_box_nr popup_box_nr_2" v-if="popup_nav_id == 2">
					<view class="popup_box_nr_2_title">退订规则</view>
					<view class="popup_box_nr_2_text">
						为确保房客及房东双方共同利益，您在退订时，需遵守相关退订规则，规则如下：
						<view class="popup_box_nr_2_text_box">
							<view class="popup_box_nr_2_text_box_nr">
								<image class="popup_box_nr_2_text_box_nr_img" src="/static/54.png" mode=""></image>
								<view class="popup_box_nr_2_text_box_nr_text">
									入住前1天（2025-07-06 14:00）前若取消订单，不扣除房费；
								</view>
							</view>
							<view class="popup_box_nr_2_text_box_nr">
								<image class="popup_box_nr_2_text_box_nr_img" src="/static/54.png" mode=""></image>
								<view class="popup_box_nr_2_text_box_nr_text">
									入住前1天（2025-07-06 14:00）后若取消订单，将扣除 100% 房费；
								</view>
							</view>
						</view>

						取消订单和提前退房的时间，以系统中记录的时间为准。如与房东产生争议，请联系客服。
					</view>
					<view class="popup_box_nr_2_title">友情提示</view>
					<rich-text class="popup_box_nr_2_text" :nodes="youqingtishi"></rich-text>
				</view>
			</view>
		</uni-popup>

		<uni-popup
			ref="Picker_popup"
			type="bottom"
			border-radius="10px 10px 0 0"
			background-color="#fff"
			:mask-click="false"
			@change="popup_change">
			<view class="picker_popup_box">
				<view class="picker_popup_box_top">
					<image class="picker_popup_box_top_zw" src="/static/50.png" mode="" @click="ed(false)"></image>
					<view class="picker_popup_box_top_title">选择入住离开日期</view>
				</view>
				<view class="picker_popup_box_nr" style="padding-bottom: 30rpx; height: 50vh; overflow-y: auto">
					<!-- 	<date-picker
						:show="showPicker"
						type="range"
						:value="cityStore.formatted"
						:show-tips="true"
						:begin-text="'入住'"
						:end-text="'离店'"
						:show-seconds="true"
						@confirm="ed"
						@cancel="ed" /> -->
					<flCalendar :activeArray="activeArray" @confirm="submit" @cancel="ed(false)">
						<template v-slot:header></template>
					</flCalendar>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import flCalendar from '@/components/fl-calendar/fl-calendar.vue'
	import DatePicker from '@/components/datepicker/datepicker.vue'
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let id = ref(0)
	let show = ref(false)
	let popup = ref(null)
	let popup_nav_id = ref(1)
	let detail = ref({})
	let pingjia = ref({})
	let fangdong = ref([])
	let fangyuans = ref([])
	let shebei = ref([])
	let pjcount = ref(0)
	let haofang = ref([])
	let youqingtishi = ref(null)
	let activeArray = ref([])

	// 响应式变量定义
	const showPicker = ref(false)
	let Picker_popup = ref(null)
	// 显示日期选择器
	const onShowDatePicker = (type) => {
		console.log('cityStore', cityStore)
		showPicker.value = true
		Picker_popup.value.open()
	}

	// 处理选择结果

	const ed = (result) => {
		Picker_popup.value.close()
		showPicker.value = false
	}
	const submit = (value) => {
		console.log('value', value.start.date)
		console.log('value', value.end.date)
		let today = dayDate(value.start.date)
		let tomorrow = dayDate(value.end.date)
		const startDate = new Date(value.start.date)
		const endDate = new Date(value.end.date)
		const timeDiff = endDate.getTime() - startDate.getTime()
		const dayDiff = timeDiff / (1000 * 60 * 60 * 24)
		cityStore.formatted = [value.start.date, value.end.date]
		cityStore.month_day_1 = today.month_day
		cityStore.month_day_2 = tomorrow.month_day
		cityStore.weekday_1 = today.weekday
		cityStore.weekday_2 = tomorrow.weekday
		cityStore.dayDiff = dayDiff
		cityStore.formatted_1 = value.start.date
		cityStore.formatted_2 = value.end.date
		Picker_popup.value.close()
		showPicker.value = false  
	}
	// 获取的年月日
	const dayDate = (value) => {
		const today = new Date(value)
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
		const weekday = weekdays[today.getDay()]
		return {
			weekday: weekday,
			month_day: month + '月' + day + '日',
			formatted: `${year}-${month}-${day}`
		}
	}

	const popup_change = (e) => {
		console.log(e.show)
		show.value = e.show
	}
	const open = (id) => {
		console.log(id)
		popup_nav_id.value = id
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	const renderRating = (score) => {
		const stars = []
		for (let i = 1; i <= 5; i++) {
			if (score >= i - 0.5) {
				// 判断是否 >= 当前星级 - 0.5
				if (score >= i) {
					stars.push('10.png') // 满星
				} else {
					stars.push('11.png') // 半星
				}
			} else {
				stars.push('12.png') // 无星
			}
		}
		return stars
	}

	const collection = () => {
		http.post('/srapi/wode/collect', { fyid: detail.value.id }).then((res) => {
			console.log('收藏', res)
			uni.showToast({
				mask: true,
				title: res.msg,
				icon: 'none',
				duration: 500
			})
			detail.value.is = res.cang
		})
	}

	const indexlist = async () => {
		console.log('cityStore', cityStore.localtion)
		await http
			.noAuthpost('/srapi/home/fydetail', {
				id: id.value,
				lat: cityStore.localtion.latitude,
				lng: cityStore.localtion.longitude
			})
			.then((res) => {
				console.log('返回值', res)
				fangdong.value = res.fangdong
				detail.value = res.data
				fangyuans.value = res.fangyuans
				pingjia.value = res.pingjia
				shebei.value = res.shebei
				pjcount.value = res.pjcount
				haofang.value = res.haofang
			})
	}
	const Location = () => {
		console.log(666)
		uni.openLocation({
			name: detail.value.title,
			address: detail.value.address,
			latitude: Number(detail.value.weidu),
			longitude: Number(detail.value.jingdu),
			success: function () {
				console.log('success')
			},
			fail(err) {
				console.log('err', err)
			}
		})
	}
	onShow(() => {
		console.log('页面刷新')
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)
		id.value = option.id
		await cityStore.init()
		await indexlist()
		await http.noAuthpost('/srapi/wode/xieyi', { id: id.value }).then((res) => {
			console.log('协议', res.data)
			youqingtishi.value = res.data.youqingtishi
		})
		await http.noAuthpost('/srapi/keyuan/ydxianshi', { id: id.value }).then((res) => {
			activeArray.value = res.data
		})
		console.log('activeArray.value', activeArray.value)
	})
	onShareAppMessage((res) => {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			path: 'pages_A/condo_detail/condo_detail?id=' + id.value
		}
	})
	const to_condo_detail = (id) => {
		uni.redirectTo({
			url: '/pages_A/condo_detail/condo_detail?id=' + id
		})
	}
	const to_appraise_list = () => {
		uni.navigateTo({
			url: '/pages_A/appraise_list/appraise_list?id=' + id.value
		})
	}
	const to_landlord_home = (id) => {
		uni.navigateTo({
			url: '/pages_A/landlord_home/landlord_home?id=' + id
		})
	}
	const to_booking = () => {
		uni.navigateTo({
			url: '/pages_A/booking/booking?id=' + id.value
		})
	}
</script>

<style lang="less" scoped>
	.top {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.swiper-box {
		width: 750rpx;
		height: 750rpx;
		.swiper-item {
			width: 750rpx;
			height: 750rpx;
		}
	}
	.con {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background: linear-gradient(0deg, #f4f5f9 40%, #ffffff 80%);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
		top: -30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000000;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
		.title_zw {
			width: 6rpx;
			height: 30rpx;
			background: #2a68ef;
			border-radius: 3rpx;
			margin-right: 13rpx;
		}
		.title_right {
			flex: 1;
			font-size: 24rpx;
			font-weight: 500;
			text-align: right;
			color: #787878;
		}
	}
	.bq {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.bq_nr {
			border: 1rpx solid #b6b6b6;
			border-radius: 6rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #656565;
			padding: 10rpx 12rpx;
			margin-right: 11rpx;
			margin-bottom: 15rpx;
		}
		.bq_nr_x {
			border: 1rpx solid #e93424;
			color: #e93424;
		}
	}
	.lx {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.lx_nr {
			width: 216rpx;
			height: 163rpx;
			background: #f7f8fa;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.lx_nr_img {
				width: 47rpx;
				height: 48rpx;
				margin-bottom: 15rpx;
			}
			.lx_nr_title {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				margin-bottom: 10rpx;
			}
			.lx_nr_text {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
			}
		}
	}

	.info {
		background: #e6f3ff;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		margin-bottom: 60rpx;
		.info_box {
			padding: 30rpx;
			box-sizing: border-box;
			width: 690rpx;
			height: 124rpx;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_box_img {
				width: 690rpx;
				height: 124rpx;
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
			}
			.info_box_left {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				.info_box_left_img {
					width: 30rpx;
					height: 32rpx;
					margin-right: 18rpx;
				}
			}
			.info_box_right {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				font-size: 20rpx;
				font-weight: 500;
				color: #000000;
				.info_box_right_img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 21rpx;
				}
			}
		}
		.info_right_btn {
			border-bottom: 1rpx solid #ffffff;
			border-left: 1rpx solid #ffffff;
			border-right: 1rpx solid #ffffff;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_right_btn_nr {
				display: flex;
				justify-content: center;
				align-items: center;
				.info_right_btn_nr_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					margin-right: 20rpx;
				}
				.info_right_btn_nr_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
				.info_right_btn_nr_img {
					width: 9rpx;
					height: 16rpx;
				}
			}
		}
	}

	.serve {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		padding-bottom: 1rpx;
		margin-bottom: 60rpx;
		.serve_box {
			display: flex;
			align-items: flex-start;
			margin-bottom: 50rpx;
			.serve_box_left {
				width: 100rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.serve_box_right {
				flex: 1;
				display: grid;
				/*等额 分成 1fr份*/
				grid-template-columns: 1fr 1fr 1fr;
				/*行间距 列间距*/
				grid-gap: 25rpx 5rpx;
				.serve_box_right_nr {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #383838;
					.serve_box_right_nr_img {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.appraise {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 60rpx;
		.appraise_left {
			width: 62rpx;
			height: 62rpx;
			margin-right: 20rpx;
		}
		.appraise_right {
			flex: 1;
			.appraise_right_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				.appraise_right_title_left {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.appraise_right_title_right {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
			}
			.appraise_right_pf {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #ff5a01;
				margin-bottom: 30rpx;
				.appraise_right_pf_img {
					width: 19rpx;
					height: 18rpx;
					margin-right: 5rpx;
				}
			}
			.appraise_right_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				margin-bottom: 30rpx;
			}
			.appraise_right_img {
				display: grid;
				/*等额 分成 1fr份*/
				grid-template-columns: 1fr 1fr 1fr;
				/*行间距 列间距*/
				grid-gap: 15rpx;
				.appraise_right_img_nr {
					width: 141rpx;
					height: 141rpx;
				}
			}
		}
	}

	.landlord {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
		.landlord_left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			.landlord_left_img {
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
			}
		}
		.landlord_right {
			width: 140rpx;
			height: 42rpx;
		}
	}

	.notice {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		padding-bottom: 1rpx;
		margin-bottom: 60rpx;
		.notice_nr {
			display: flex;
			align-items: flex-start;
			margin-bottom: 50rpx;
			.notice_nr_left {
				width: 126rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.notice_nr_right {
				flex: 1;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				.notice_nr_right_img {
					width: 6rpx;
					height: 10rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		.list_nr {
			width: 335rpx;
			position: relative;
			background: #ffffff;
			border-radius: 12rpx;
			.list_nr_img {
				width: 335rpx;
				height: 335rpx;
			}
			.list_nr_pfzw {
				width: 106rpx;
				position: absolute;
				right: 10rpx;
				top: 280rpx;
				.list_nr_pfzw_img {
					width: 106rpx;
					height: 34rpx;
					border-radius: 17rpx;
					position: absolute;
					z-index: 1;
				}
				.list_nr_pfzw_text {
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #ffffff;
					position: relative;
					z-index: 2;
					padding-left: 20rpx;
				}
			}
			.list_nr_box {
				padding: 20rpx;
				.list_nr_title {
					white-space: nowrap; /* 禁止换行 */
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 显示省略号 */
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.list_nr_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					margin-bottom: 15rpx;
				}
				.list_nr_num {
					.span1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #e93424;
					}
					.span2 {
						width: 61rpx;
						height: 28rpx;
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #e93424;
					}
					.span3 {
						font-size: 20rpx;
						font-weight: 700;
						color: #e93424;
					}
					.span4 {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #787878;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.btn {
		width: 750rpx;
		height: 110rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 50;
			width: 750rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn_box_left {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-right: 30rpx;
				.btn_box_left_img {
					width: 36rpx;
					height: 34rpx;
					margin-bottom: 10rpx;
				}
				.btn_box_left_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.btn_box_num {
				text-align: center;
				flex: 1;
				color: #2a68ef;
				.span1 {
					font-size: 24rpx;
					font-weight: 500;
				}
				.span2 {
					font-size: 48rpx;
					font-weight: 700;
					color: #2a68ef;
				}
				.span3 {
					font-size: 20rpx;
					font-weight: 700;
					color: #2a68ef;
				}
			}
			.btn_box_tight {
				width: 200rpx;
				height: 72rpx;
				background: #2a68ef;
				border-radius: 12rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 72rpx;
			}  
		}
	}

	.popup_box {
		min-height: 30vh;
		max-height: 70vh;
		overflow-y: auto;
		position: relative;
		padding: 30rpx;
		.popup_box_zw {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 0;
			top: 0;
			padding: 30rpx;
		}
		.popup_box_top {
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
			margin-bottom: 40rpx;
		}
		.popup_box_nav {
			background: #ffffff;
			border-bottom: 1px solid rgba(0, 0, 0, 0.12);
			display: flex;
			justify-content: center;
			align-items: center;
			.popup_box_nav_nr {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.popup_box_nav_nr_zw {
					width: 100rpx;
					height: 6rpx;
					background: #ffffff;
					border-radius: 3rpx;
				}
			}
			.popup_box_nav_nr_xz {
				color: #2367fa;
				.popup_box_nav_nr_zw {
					background: #2367fa;
				}
			}
		}

		.popup_box_nr {
			padding: 50rpx 30rpx;
			max-height: 70vh;
			overflow-y: auto;
		}
		.popup_box_nr_1 {
			.popup_box_nr_1_title {
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 30rpx;
			}
			.popup_box_nr_1_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				margin-bottom: 60rpx;
			}
		}
		.popup_box_nr_2 {
			.popup_box_nr_2_title {
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 30rpx;
			}
			.popup_box_nr_2_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				margin-bottom: 60rpx;

				.popup_box_nr_2_text_box {
					background: #2367fa;
					border-radius: 24rpx;
					padding: 40rpx 50rpx 10rpx;
					margin: 30rpx 0;
					.popup_box_nr_2_text_box_nr {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						.popup_box_nr_2_text_box_nr_img {
							width: 42rpx;
							height: 42rpx;
							margin-right: 20rpx;
						}
						.popup_box_nr_2_text_box_nr_text {
							flex: 1;
							font-size: 24rpx;
							font-weight: 500;
							color: #ffffff;
							margin-bottom: 30rpx;
						}
					}
				}
			}
		}
	}
	//
</style>
